<template>
    <div class="main" ref="rightUserList">
        <right-menu style="z-index: 100" :offset="rightMenuOffset" :show="rightMenuShow"
                    @update:show="rightMenuShow = false" id="secondLevelMenu">
            <ul class="select-authority-box">
                <li v-for="(role,key) in rolesList" class="pointer" :key="key" v-text="role.name"
                    @click="editUser(role)"></li>
            </ul>
        </right-menu>

        <div class="file-box">
            <check-icon class="file-icon" :fileData="fileData"></check-icon>
            <div class="file-content">
                <p class="file-name overflow-ellipsis" :title="fileData.name" v-text="fileData.name"></p>
                <p class="time">
                    <span v-text="publicFun.rebuildTime(fileData.updateTime,2)"></span>
                    <!--<span class="size" v-text="size"></span>-->
                </p>
                <ul class="tags">
                    <li class="fl" v-for="(tag,key) in fileData.tags" :key="key" v-text="tag"></li>
                </ul>
            </div>
        </div>
        <div class="menu-box">
            <a class="button pointer fl button-active">
                协作成员
                <!--(<span v-text="inUserList.length + outUserList.length"></span>)-->
            </a>
            <a class="button pointer fr ">动态</a>
        </div>

        <div class="title-box relative">
            <div class="relative" ref="introductionContent">
                <div class="introduction-content" v-show="introduction">
                    <ul class="authority-box">
                        <li>
                            <p class="title">编辑</p>
                            <p class="content">预览 | 新建/上传 | 分享/下载/复制 <br>| 重命名自己的文件/重命名别人的文件</p>
                        </li>
                        <li>
                            <p class="title">上传/下载</p>
                            <p class="content">预览 | 新建/上传 | 分享/下载/复制 <br>| 重命名自己的文件</p>
                        </li>
                        <li>
                            <p class="title">上传/预览</p>
                            <p class="content">预览 | 新建/上传 | 重命名自己的文件</p>
                        </li>
                        <li>
                            <p class="title">下载行·</p>
                            <p class="content">预览 | 分享/下载/复制</p>
                        </li>
                        <li>
                            <p class="title">仅上传</p>
                            <p class="content">上传</p>
                        </li>
                        <li>
                            <p class="title">仅预览</p>
                            <p class="content">预览</p>
                        </li>

                    </ul>
                </div>
                <div content="pointer" @click="showIntroduction">
                    <i class="icon pointer">i</i>
                    <p class="fl title pointer">权限说明</p>
                </div>
            </div>
        </div>
        <div class="user-list-box">
            <div class="in-company">
                <div class="drop-down pointer" @click="showInList">
                    <p class="fl">组织成员 (<span v-text="inUserList.length"></span>)</p>
                    <img class="arrow" :class="showInCompany? 'arrow-back' :'arrow-rotate'"
                         src="@/assets/icon/arrow_icon.png">
                </div>
                <ul v-show="showInCompany">
                    <li class="user-info-box" v-for="(userInfo,key) in inUserList" :key="key"
                        @click.right="showRightMenu($event,userInfo)">
                        <head-icon class="header fl" :border="null" :img="userInfo.avatar" :name="userInfo.name"
                                   size="40px" fontSize="11px">
                        </head-icon>
                        <div class="user-info">
                            <div class="name-box">
                                <p class="name">
                                    <span v-text="userInfo.userName"></span> <span v-if="userInfo.status">(继承)</span>
                                    <span class="phone" v-text="userInfo.mobile"></span>
                                </p>
                                <p class="dept">
                                    <span v-text="userInfo.dept">产品部</span>
                                    <a class="roles fr pointer" @click="showRightMenu($event,userInfo)" v-text="checkRoles(userInfo.roleId)"></a>
                                </p>
                            </div>
                        </div>
                        <img v-if="!userInfo.status" @click.stop="deleteUser(userInfo,key,1)"
                             class="delete-button pointer"
                             src="@/assets/icon/team/delete_people.png">
                        <p class="hover-box">移除协作</p>
                    </li>
                </ul>
            </div>
            <div class="out-company">
                <div class="drop-down pointer" @click="showOutList">
                    <p class="fl">外部协作人员 (<span v-text="outUserList.length"></span>)</p>
                    <img class="arrow" :class="showOutCompany? 'arrow-back' : 'arrow-rotate'"
                         src="@/assets/icon/arrow_icon.png">
                </div>
                <ul v-show="showOutCompany">
                    <li class="user-info-box" v-for="(userInfo,key) in outUserList" :key="key">
                        <head-icon class="header fl" :border="null" :name="userInfo.name" size="32px"
                                   fontSize="11px">
                            <img v-if="!userInfo.status" @click.stop="deleteUser(userInfo,key)"
                                 class="delete-button pointer"
                                 src="@/assets/icon/delete_icon.png">
                        </head-icon>
                        <div class="user-info">
                            <div class="name-box">
                                <p class="name">
                                    <span v-text="userInfo.name"></span> <span v-if="userInfo.status">(继承)</span>
                                    <span class="uset-type" v-if="userInfo.type"
                                          v-text="checkUserType(userInfo.type)"></span>
                                </p>
                                <p class="dept">
                                    <span>产品部</span><span class="phone" v-text="userInfo.phone"></span>
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>
        </div>
        <div class="bottom-box text-center">
            <button class="pointer" @click="showInviteUserModel">+ 邀请成员</button>
        </div>
        <team-invite v-if="inviteUserModel" :fileData="fileData" :rolesList="rolesList" :fileUserList="fileUserList"
                     @closeModel="inviteUserModel = false" @addUser="getFilePeople"></team-invite>
        <dialog-box v-show="deleteModel" title="移除协作" @clickCancel="cancel()" @clickOk="alertOk()">
            <div style="height: 60px">
                <p class="h1 text-center">是否将该成员移出协作？</p>
                <p class="h2 text-center">确认移除后，该成员将无法看到此协作文件</p>

            </div>
        </dialog-box>
    </div>
</template>

<script>
  import DialogBox from '@/components/DialogBox'
  import CheckIcon from '@/components/CheckIcon'
  import HeadIcon from '@/components/HeadIcon'
  import RightMenu from '@/components/RightMenu'
  import TeamInvite from '@/components/FileList/TeamInvite'

  export default {
    name: "PersonnelRightMenu",
    components: {
      DialogBox,
      CheckIcon,
      HeadIcon,
      RightMenu,
      TeamInvite
    },
    data() {
      return {
        deleteModel:false,
        inviteUserModel: false,
        chooseUserInfo: 0,
        rightMenuShow: false,
        introduction: false,
        size: '',
        showInCompany: true,
        showOutCompany: false,
        rolesList: [],
        rightMenuOffset: {
          left: 0,
          top: 0
        },
        currentUserData:{},
        inUserList: [],
        outUserList: [],
        fileUserList: []
      }
    },
    beforeDestroy() {
      document.body.removeEventListener('click', this.outClick)
    },
    created() {
      this.gatSize()
    },
    mounted() {
      const that = this
      document.body.removeEventListener("click", this.outClick)
      document.body.addEventListener('click', that.outClick)
      this.getFilePeople()
      this.getRolesList()
    },
    watch: {
      fileData: function () {
        this.gatSize()
      }
    },
    props: {
      fileData: {
        type: Object,
        default: function () {
          return {
            name: '',
            updateTime: 0
          }
        }
      }
    },
    methods: {
      getFilePeople: function () {
        const that = this
        this.$http.get('/pan/file/cooperate/v1/users/' + this.fileData.fileId).then(function (data) {
          if (data.data.code === 1) {
            that.fileUserList = data.data.data
            that.inUserList = data.data.data
          }
        })
      },
      cancel: function () {
          this.deleteModel = false
      },
      chooseAll: function (event) {
        this.chooseFileList = []
        const that = this
        if (event.target.checked) {
          this.fileList.forEach(function (fileData) {
            that.chooseFileList.push(fileData.id)
          })
        }
      },
      alertOk:function(){
        const that = this
        this.$http.delete('/pan/file/cooperate/v1/' + that.currentUserData.userInfo.id).then(function (data) {
          if (data.data.code === 1) {
            if (that.currentUserData.type) {
              that.inUserList.splice(that.currentUserData.key, 1)
            } else {
              that.outUserList.splice(that.currentUserData.key, 1)
            }
            that.deleteModel = false
            that.$message({
              type: 'success',
              message: '删除成功'
            })
          }
        })
      },

      showInviteUserModel: function () {
        this.inviteUserModel = true
      },
      checkRoles: function (roleId) {
        const roleData = this.rolesList.find(function (role) {
          return roleId == role.id
        })
        return roleData.name
      },


      editUser: function (roleInfo) {
        const that = this
        this.rightMenuShow = false
        this.$http.post('/pan/file/cooperate/user/v1', {
          fileId: this.fileData.fileId,
          roleId: roleInfo.id,
          userId: this.chooseUserInfo.userId
        }).then(function (data) {
          if (data.data.code === 1) {
            that.$message({
              type: 'success',
              message: '修改成功'
            })
            that.getFilePeople()
          }
        })
      },

      getRolesList: function () {
        const that = this
        this.$http.get('/pan/file/cooperate/roles/v1').then(function (data) {
          if (data.data.code === 1) {
            that.rolesList = data.data.data
          }
        })
      },
      showRightMenu: function (event, userInfo) {
        this.chooseUserInfo = userInfo
        this.rightMenuOffset.left = Math.min(event.pageX, document.body.clientWidth - 120)
        this.rightMenuOffset.top = Math.min(event.pageY, document.body.clientHeight - 277)
        this.rightMenuShow = true
      },
      showIntroduction: function () {
        this.introduction = !this.introduction
      },
      outClick: function (event) {
        let rightMenu = document.getElementById('secondLevelMenu')
        if (!this.$refs.rightUserList.contains(event.target) && !rightMenu.contains(event.target)) {
          this.$emit('update:show', false)
          document.body.removeEventListener("click", this.outClick)
        }
        if (!this.$refs.introductionContent.contains(event.target)) {
          this.introduction = false
        }
      },
      deleteUser: function (userInfo, key, type) {
        this.deleteModel = true
        this.currentUserData = {
          userInfo:userInfo,
          key:key,
          type:type
        }
      },
      showOutList: function () {
        this.showOutCompany = !this.showOutCompany
      },
      showInList: function () {
        this.showInCompany = !this.showInCompany
      },
      gatSize: function () {
        if (this.fileData.size > 0) {
          this.size = this.publicFun.getFileSize(this.fileData.size, 1)
        } else {
          this.size = ''
        }
      },
      checkUserType: function (type) {
        if (type === 1) {
          return '管理员'
        } else if (type === 2) {
          return '部门负责人'
        } else if (type === 3) {
          return '创建者'
        }

      }
    }
  }
</script>

<style scoped>
    .main {
        position: absolute;
        right: 0;
        top: 75px;
        height: calc(100vh - 77px);
        width: 320px;
        background: rgba(255, 255, 255, 1);
        border: 1px solid rgba(238, 238, 238, 1);
        box-shadow: -2px 0 4px 0 rgba(191,200,203,0.50);
    }

    .main .h1{
        margin-top: 25px;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
        font-weight: 500;
        line-height: 20px;
    }

    .main .h2{
        margin-top: 3px;
        line-height: 20px;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0.86px;
    }

    .main .bottom-box {
        height: 79px;
        position: absolute;
        bottom: 0;
        background: #FFFFFF;
        box-shadow: 0 -1px 4px 0 rgba(216,216,216,0.50);
        border-radius: 2px;
        width: 100%;
    }

    .main .bottom-box button{
        background: #4690F5;
        border-radius: 2px;
        font-size: 12px;
        color: #FFFFFF;
        letter-spacing: 0.86px;
        height: 30px;
        border: none;
        width: 217px;
        margin-top: 25px;
    }

    .introduction-content {
        position: absolute;
        border: 1px solid rgba(226, 226, 226, 1);
        box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        top: 20px;
        left: 19px;
    }

    .title-box {
        margin-top: 10px;
        height: 16px;
    }

    .select-authority-box {
        width: 100px;
        padding: 5px 0;
        background: rgba(255, 255, 255, 1);
    }

    .select-authority-box li {
        box-sizing: border-box;
        height: 30px;
        font-size: 12px;
        color: #323232;
        padding-left: 20px;
        line-height: 30px;
        margin: 0;
    }

    .select-authority-box li:hover {
        background: rgba(0, 0, 0, 0.08);
    }

    .authority-box {
        height: 370px;
        width: 240px;
        padding-top: 7px;
        background: rgba(255, 255, 255, 1);
    }

    .authority-box li {
        padding-top: 10px;
        padding-left: 19px;
        box-sizing: border-box;
        height: 60px;
    }

    .authority-box li .title {
        font-size: 12px;
        color: #323232;
        line-height: 18px;
        margin: 0;

    }

    .authority-box li .content {
        font-size: 12px;
        color: #999999;
        line-height: 18px;
    }

    .title-box .icon {
        content: 'i';
        margin-top: 2px;
        background: #4690F5;
        border-radius: 50%;
        margin-left: 19px;
        height: 12px;
        width: 12px;
        font-size: 10px;
        float: left;
        color: white;
        text-align: center;
        line-height: 12px;
    }

    .title-box .title {
        margin-left: 5px;
        font-size: 12px;
        line-height: 16px;
        color: rgba(50, 50, 50, 1);
        color: #666666;
        letter-spacing: 0.86px;
    }

    .title-box a {
        font-size: 12px;
        line-height: 16px;
        font-weight: 500;
        color: rgba(70, 144, 245, 1);
        margin-right: 20px;
    }

    .main .file-box {
        padding: 23px 0 0 28px;
        box-sizing: border-box;
        width: 320px;
        height: 97px;
        background: #E2E7F2;
    }

    .main .file-box .file-icon {
        margin-top: 6px;
        float: left;
        width: 24px;
        height: 24px;
        transform: scale(2);
    }

    .main .file-box .file-content {
        margin-left: 26px;
        float: left;
        width: 230px;
    }

    .main .file-box .file-name {
        height: 14px;
        font-size: 14px;
        font-weight: 500;
        max-width: 260px;
        color: #333333;
        letter-spacing: 1px;
    }

    .main .file-box .tags {
        margin-top: 5px;
        height: 18px;
        overflow: hidden;
    }

    .main .file-box .tags li {
        background: #FFFFFF;
        border: 1px solid #D8D9E5;
        font-size: 10px;
        color: #666666;
        letter-spacing: 0.71px;
        line-height: 15px;
        padding: 0 5px;
        margin-right: 10px;
    }

    .main .file-box .time {
        height: 12px;
        font-size: 12px;
        color: #666666;
        letter-spacing: 0.86px;
        margin-top: 9px;
    }

    .main .file-box .size {
        margin-left: 10px;
    }

    .main .menu-box {
        height: 35px;
        border-bottom: 1px solid #D8D9E5;
    }

    .main .menu-box .button {
        width: 50%;
        line-height: 35px;
        position: relative;
        font-size: 14px;
        color: #666666;
        letter-spacing: 1px;
        font-weight: 500;
        text-align: center;
    }

    .main .menu-box .button-active:before {
        content: '';
        position: absolute;
        top: 34px;
        width: 40px;
        height: 2px;
        background: #4690F5;
        border-radius: 2px;
        left: calc(50% - 20px);
    }

    .main .menu-box .button:hover {
        background: rgba(178, 183, 187, 0.1);
    }

    .main .user-list-box {
        margin-top: 10px;
        overflow: auto;
        max-height: 375px;
    }

    .main .user-list-box .drop-down {
        font-size: 14px;
        color: #333333;
        letter-spacing: 1px;
        height: 30px;
        line-height: 30px;
        padding: 0 19px;
    }

    .main .user-list-box .user-info-box {
        height: 50px;
        padding: 5px 20px;
        box-sizing: border-box;
        position: relative;
    }

    .main .user-list-box .user-info-box .delete-button {
        position: absolute;
        width: 20px;
        height: 20px;
        right: 22px;
        top: 17px;
    }

    .main .user-list-box .user-info-box .delete-button:hover+.hover-box{
        display: block;
    }

    .main .user-list-box .user-info-box .hover-box{
        background: rgba(30,35,70,0.55);
        border-radius: 0.5px;
        font-size: 10px;
        color: #FFFFFF;
        letter-spacing: 0.71px;
        position: absolute;
        line-height: 18px;
        padding:0 5px;
        right: 5px;
        bottom: -6px;
        display: none;
    }

    .main .user-list-box .user-info-box .user-info {
        margin-left: 24px;
        float: left;
        width: 150px;
    }

    .main .user-list-box .user-info-box .roles {
        font-size: 12px;
        font-weight: 500;
        color: #666666;
        letter-spacing: 0.86px;
        position: relative;
        margin-right: 19px;
    }

    .main .user-list-box .user-info-box .roles:before{
        content: '';
        top: 7px;
        position: absolute;
        width: 0;
        height: 0;
        border: 5px solid transparent;
        border-top-color: #6D6E8C;
        right: -19px;
    }

    .main .user-list-box .user-info-box .header {
    }

    .main .user-list-box .user-info-box .name {
        line-height: 18px;
        font-size: 14px;
        color: #333333;
        letter-spacing: 1px;
    }


    .main .user-list-box .user-info-box .dept {
        font-size: 12px;
        line-height: 17px;
        margin-top: 3px;
        color: #666666;
        letter-spacing: 0.86px;
    }

    .main .user-list-box .user-info-box .phone {
        font-size: 12px;
        color: #666666;
        letter-spacing: 0.86px;
        float: right;
    }

    .main .user-list-box .user-info-box .uset-type {
        margin-left: 10px;
        height: 16px;
        background: rgba(255, 154, 0, 1);
        border-radius: 2px;
        padding: 0 4px;
        font-size: 10px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
    }


    .arrow {
        height: 12px;
        width: 12px;
        float: right;
        margin-top: 10px;
    }

    .arrow-rotate {
        transform: rotate(-180deg);
        transition: all .2s;
    }

    .arrow-back {
        transform: rotate(0deg);
        transition: all .2s;
    }


</style>
